<template>
    <div class="recipes">
        <van-nav-bar left-text="返回" @click-left="back" left-arrow>
            <template #title>
                <span class="title"><i>"{{keyword }}"</i>的相关菜谱</span>
            </template>
        </van-nav-bar>
        <div class="order">
            <van-tabs v-model:active="active" color="#f9c653" line-width="30px" line-height="2px"
                title-active-color="#f9c653" title-inactive-color="#777" @click-tab="switchOrder(active)">
                <van-tab v-for="(item, index) in orderData" :key="index" :title="item.name">
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad(index)">
                        <van-cell v-for="(item, index) in recipesListData" :key="index">
                            <template #title>
                                <div class="recipes-order">
                                    <div class="order-item">
                                        <div class="img-box" :style="{ backgroundImage: `url(${item.r.img})` }"
                                            @click="getRecipeDetail(item.r.id)">
                                        </div>
                                        <div class="re-message">
                                            <h3 class="title" v-html="item.r.n"></h3>
                                            <ul>
                                                <li class="materials" v-for="(v, i) in item.r.major" :key="i">{{ v.title
                                                }}
                                                </li>
                                            </ul>
                                            <p class="collect">收藏人数:{{ item.r.vc }}人</p>
                                            <div class="author-info">
                                                <img :src="item.r.a.p" @click="goUserDetail(item.r.a.id)">
                                                <span class="author">{{ item.r.a.n }}</span>
                                                <span class="grade">v{{ item.r.a.lvl }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </van-cell>
                    </van-list>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive ,onMounted} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getRecipes } from "../api/api"
let active: any = ref<number>(0)
let route: any = useRoute()
let router: any = useRouter()
let recipesListData: any = ref<Array<any>>([])
let orderData: any = reactive([{
    name: "综合排序",
    id: "0"
},
{
    name: "收藏最多",
    id: "2"
},
{
    name: "学做最多",
    id: "3"
},
])
let keyword:any=route.query.kw
let loading: any = ref<boolean>(false);
let finished: any = ref<boolean>(false);
let back: () => void = (): void => {
    let path: string = route.query.path
    router.push(path)
}

//切换类型
let switchOrder: (index: number) => void = (index: number): void => {
    // 清空列表数据
    recipesListData.value = []
    // 重新加载数据
    finished.value =false;
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = false;
    offsetnum.value = -1;
    //获取菜谱相关信息数据
    onLoad(index);
}
let offsetnum: any = ref<number>(-1)
//获取菜谱相关信息数据
let onLoad = async (index: number) => {
    let id: number = orderData[index].id
    offsetnum.value++
    let res: any = await getRecipes(keyword, id, offsetnum.value)
    res.data.result.list.filter((item: any) => {
        console.log(keyword, id, offsetnum.value)
        if (item.r) {
            //正则提取关键字
            let reg: any = new RegExp(keyword, 'g')
            item.r.n = item.r.n.replace(reg, `<span style="color:#E2483C">${keyword}</span>`)
            recipesListData.value.push(item)
        }
        loading.value = false;
        if (recipesListData.value.length >= 40) {
            finished.value = true;
        }
    },
    )
}
//跳菜谱详情
let getRecipeDetail: (id: string) => void = (id: string): void => {
    router.push({name:"MenuDetail",params:{menuId:id,path:route.fullPath}})
}
//跳用户主页
let goUserDetail: (id: string) => void = (id: string): void => {
    router.push({ name: 'userdetails', params: { id: id ,path:route.fullPath} })
}
</script>

<style scoped lang="scss">
.recipes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    ::v-deep .van-nav-bar__text {
        color: #333;
        font-size: 14px;
    }

    ::v-deep .van-nav-bar .van-icon {
        color: #333;
        font-size: 14px;
    }

    ::v-deep .van-cell {
        padding: 0;
        display: block;
    }

    ::v-deep .van-tabs__content {
        height: 100vh;
        overflow-y: auto;
    }

    ::v-deep .van-list {
        padding-bottom: 90px;
    }

    .title {
        i {
            color: #E2483C;
            margin-right: 5px;
        }
    }

    .order {
        .recipes-order {
            padding: 10px;
            box-sizing: border-box;

            .order-item {
                display: flex;
                margin-bottom: 15px;

                &:last-child {
                    margin-bottom: 0;
                }

                .img-box {
                    width: 160px;
                    height: 130px;
                    border-radius: 6px;
                    overflow: hidden;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center center;
                }

                .re-message {
                    font-size: 14px;
                    margin-left: 5px;

                    .title {
                        width: 200px;
                        font-size: 18px;
                        margin: 0;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    ul {
                        width: 195px;
                        display: flex;
                        margin: 5px 0;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        color: #777;

                        li {
                            margin-right: 4px;
                        }
                    }

                    .collect {
                        margin: 0;
                        margin-bottom: 10px;
                        color: #777;
                    }

                    .author-info {
                        display: flex;
                        align-items: center;

                        img {
                            border-radius: 50%;
                            width: 35px;
                        }

                        .author {
                            margin: 0 15px;
                            width: 100px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                        }

                        .grade {
                            border: 1px solid #f9c653;
                            padding: 0 10px;
                            border-radius: 20px;
                            color: #f9c653;
                        }
                    }
                }
            }
        }
    }
}
</style>